<template>
	<view class="article-list-wrapper">
		<view class="article-item" v-for="(article, index) in articleList" :key="index"
			@click="clickArt(article)">
			<view class="article-info">
				<text class="article-title">{{ article.title }}</text><br />
				<text class="article-author">{{ article.content }}</text><br />
				<span></span>
				<text class="article-time">{{ article.author}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					{{$u.timeFormat(article.createTime, 'yyyy年mm月dd日')}}</text>
			</view>
			<image class="article-thumbnail" :src="staticUrl+article.extend7" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	import config from "@/common/config.js" // 全局配置文件
	export default {
		data() {
			return {
				articleList: [],
				staticUrl:config.staticUrl,
			};
		},
		props: {
			// 可以定义一个props，用于接收外部传入的文章列表数据，方便动态更新组件展示内容
			listData: {
				type: Array,
				default: () => []
			}
		},
		watch: {
			listData(newVal) {
				// 当外部传入的文章列表数据发生变化时，更新组件内部的文章列表数据
				this.articleList = newVal;
			}
		},
		methods: {
			clickArt(article){
				this.$u.route({
					url : 'pages/center/artShow',
					params:{
						id : article.id,
						title : article.title,
						content : article.content,
						createTime : article.createTime,
					}
				});
			},
		}
	};
</script>

<style scoped>
	.article-list-wrapper {
		width: 100%;
	}

	.article-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		border-bottom: 1px solid #ccc;
	}

	.article-info {
		flex: 1;
		padding: 0 10px;
	}

	.article-title {
		font-size: 16px;
		font-weight: bold;
	}

	.article-author {
		font-size: 14px;
		color: #666;
	}

	.article-time {
		font-size: 12px;
		color: #999;
	}

	.article-thumbnail {
		width: 80px;
		height: 80px;
		margin-right: 10px;
	}
</style>